/*
 * @ddescription: 修改收货地址
 * @Author: along
 * @Date: 2020-10-27
 * @Last Modified by: mikey.zhaopeng
 * @Last Modified time: 2021-04-09 17:27:55
 */
<template>
    <div class="changeAddress">
        <el-dialog
            title="修改收货地址"
            :visible.sync="dialogLog"
            width="640px"
            :close-on-click-modal="false"
        >
            <el-form
                :model="ruleForm"
                :rules="rules"
                ref="ruleForm"
                label-width="120px"
                class="demo-ruleForm"
            >
                <el-form-item
                    label="收件人姓名"
                    prop="true_name"
                >
                    <el-input
                        v-model="ruleForm.true_name"
                        size="medium"
                        placeholder="请填写收件人姓名"
                    />
                </el-form-item>
                <el-form-item
                    label="电话号码"
                    prop="phone"
                >
                    <el-input
                        v-model="ruleForm.phone"
                        size="medium"
                        placeholder="请填写联系电话"
                    />
                </el-form-item>
                <!-- <el-form-item
                    label="邮政编码"
                >
                    <el-input
                        v-model="ruleForm.code"
                        size="medium"
                        placeholder="选填"
                        :style="{width: '430px'}"
                    />
                </el-form-item> -->
                <el-form-item
                    label="收货地址"
                    prop="reginValue"
                >
                    <el-cascader
                        v-model="ruleForm.reginValue"
                        :options="regin"
                        :props="{ expandTrigger: 'hover' }"
                        clearable
                        :filterable="true"
                        @change="fnChangeAdress"
                        separator="-"
                        size="small"
                        placeholder="请选择省市区"
                        class="sale-input"
                        :style="{width: '392px'}"
                    />
                </el-form-item>
                <el-form-item
                    label="详细收货地址"
                    prop="goods_address"
                >
                    <el-input
                        v-model="ruleForm.goods_address"
                        size="medium"
                        placeholder="请填写详细的收货地址"
                    />
                </el-form-item>
            </el-form>
            <div
                slot="footer"
                class="dialog-footer"
            >
                <el-button
                    @click="dialogLog = false"
                    size="medium"
                    type="default"
                    :style="{width: '120px', marginRight: '32px'}"
                >
                    取 消
                </el-button>
                <el-button
                    type="primary"
                    size="medium"
                    :style="{width: '120px'}"
                    @click="submit('ruleForm')"
                >
                    确 认
                </el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'ChangeAddress',
    data () {

        const validateRegin = (rule, value, callback) => {
            if(value.length === 3) {
                callback();
            } else {
                callback(new Error('请选择省市区'));
            }
        };

        return {
            dialogLog: false,
            regin: [],
            ruleForm: {
                true_name: '',
                phone: '',
                reginValue: [],
                order_reject_address_province_name: '',
                order_reject_address_city_name: '',
                order_reject_address_county_name: '',
                goods_address: ''
            },
            rules: {
                true_name: [
                    { required: true, message: '收件人姓名不可以为空', trigger: 'change' }
                ],
                reginValue: [
                    { required: true, message: '收货地址不可以为空', trigger: 'change' },
                    { validator: validateRegin, trigger: 'blur' }
                ],
                phone: [
                    { required: true, message: '联系电话不可以为空', trigger: 'change' }
                ],
                goods_address: [
                    { required: true, message: '收货地址不可以为空', trigger: 'change' }
                ]
            },
            order_no: ''
        };
    },
    watch: {
        dialogLog (val) {
            if(!val) {
                this.ruleForm = {
                    true_name: '',
                    phone: '',
                    reginValue: [],
                    order_reject_address_province_name: '',
                    order_reject_address_city_name: '',
                    order_reject_address_county_name: '',
                    goods_address: ''
                };
            }
        }
    },
    mounted () {
        this.getAddressList();
    },
    methods: {
        /**
         * @description 打开弹窗
         */
        show () {
            this.dialogLog = true;
        },

        /**
         * @description 关闭弹窗
         */
        close () {
            this.dialogLog = false;
        },

        /**
         * @description 设置弹窗数据
         */
        setValue (row, order_no) {
            this.order_no = order_no;
            this.ruleForm = {
                true_name: row.user_name,
                phone: row.phone,
                reginValue: [
                    row.province_name,
                    row.city_name,
                    row.county_name
                ],
                goods_address: row.detail_info,
                order_reject_address_province_name: row.province_name,
                order_reject_address_city_name: row.city_name,
                order_reject_address_county_name: row.county_name,
            };

        },

        /**
         * @description 确认修改收货地址
         */
        submit (formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$post('/ShopGoodsOrder/setStudentAddress', {
                        order_no: this.order_no,
                        user_name: this.ruleForm.true_name,
                        phone: this.ruleForm.phone,
                        detail_info: this.ruleForm.goods_address,
                        province_name: this.ruleForm.order_reject_address_province_name,
                        city_name: this.ruleForm.order_reject_address_city_name,
                        county_name: this.ruleForm.order_reject_address_county_name
                    }, resp => {
                        if (resp.code == 1) {
                            this.$emit('update');
                            this.dialogLog = false;
                            this.$notify({
                                title: '提示',
                                message: '修改成功',
                                duration: 2000,
                                type: 'success'
                            });
                        } else {
                            this.$notify({
                                title: '警告',
                                message: resp.msg,
                                duration: 2000,
                                type: 'warning'
                            });
                        }
                    });
                } else {
                    return false;
                }
            });
        },

        /**
         * @description 获取联系地址
         */
        fnChangeAdress () {
            if(this.ruleForm.reginValue && this.ruleForm.reginValue.length == 3) {
                this.ruleForm.order_reject_address_province_name = this.ruleForm.reginValue[0];
                this.ruleForm.order_reject_address_city_name = this.ruleForm.reginValue[1];
                this.ruleForm.order_reject_address_county_name = this.ruleForm.reginValue[2];
            } else {
                this.ruleForm.order_reject_address_province_name = this.ruleForm.order_reject_address_city_name = this.ruleForm.order_reject_address_county_name = '';
            }
        },

        /**
         * @description 地区数据初始化
         */
        getAddressList () {
            let list = [];

            this.$post('/Localinfo/getDeliverAreaList',{}, resp=>{
                if(resp.code == 1) {
                    let regin = resp.data.list;

                    regin.forEach((element,key) => {
                        list.push({
                            value: element.label,
                            label: element.label,
                            children: []
                        });
                        if(element.children) {
                            element.children.forEach((option,i) => {
                                list[key].children.push({
                                    value: option.label,
                                    label: option.label,
                                    children: []
                                });
                                if(option.children) {
                                    option.children.map(item => {
                                        list[key].children[i].children.push({
                                            value: item.label,
                                            label: item.label
                                        });
                                    });
                                }
                            });
                        }
                    });
                    setTimeout(()=>{
                        this.regin = list;
                    },100);
                }
            });
        },
    }
};
</script>

<style lang="less" scoped>
.changeAddress {
    .dialog-footer {
        display: flex;
        justify-content: center;
    }
}
</style>

<style lang="less">
.changeAddress {
    .el-dialog__body {
        padding-bottom: 0px;
    }
    .el-dialog__footer {
        padding-top: 0;
        padding-bottom: 36px;
    }
}
</style>